<template>
    <div>
        <div class="outer">
            <i :class="flagg ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click="dochange"></i>
            <!-- <div class="title">首页</div> -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item ><span>首页</span></el-breadcrumb-item>
                <el-breadcrumb-item v-show="this.$route.meta.name2" style="color: white;">
                    <span>
                        {{ this.$route.meta.name1 }}
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-show="this.$route.meta.name2"><span style="color: gold;">{{ this.$route.meta.name2
                }}</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

<script>
import { Breadcrumb, BreadcrumbItem } from "element-ui"
export default {
    data() {
        return {
            flagg: true
        }
    },
    methods: {
        dochange() {
            this.flagg = !this.flagg
            this.$eventBus.$emit("changeBar")
        }
    },
    components: {
        "el-breadcrumb": Breadcrumb,
        "el-breadcrumb-item": BreadcrumbItem
    }
}
</script>

<style lang="less" scoped>
.outer {
    height: 50px;
    display: flex;
    color: white;
    // justify-content: center;
    align-items: center;
    width: 500px;
    font-size: 25px;
    margin-top: 10px;

    i {
        height: 50px;
        line-height: 50px;
        color: aliceblue;
        display: block;
        margin-right: 14px;
        font-size: 40px;
    }

    span {
        color: aliceblue;
        font-size: 25px;
    }
}
</style>